@import "../../sass/_index.scss";

.model {
    .mask {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;   
        background-color: $fill-mask;    
        
        @include flex(true, center, false);
        
        .popup {

            @include flex(column, false, false);

            width: 70%;
            height: 400px;
            border-radius: $radius-md;
            background-color: $fill-base;
            z-index: 1000;

            .header {
                @include flex(true, center, false);
                @include content-padded(true, true, false);
                .text {
                    font-size: $font-size-base  + 8;
                }
            }

            .inner {
                @include content-inner($h-spacing-lg, $h-spacing-lg, $h-spacing-lg, $h-spacing-lg);

                flex: auto;

                text-align: center;
            }

            .footer {
                @include content-inner($h-spacing-lg, $h-spacing-lg, $h-spacing-lg, $h-spacing-lg);

                @include flex(column, center, false);

                align-items: center;

                .caption {
                    color: $color-text-caption;
                    text-decoration: underline;
                }
            }
        }
    }
}